<template>
  <div class="home">
    <el-container>
      <el-header height="80px">
        <div>
          <img src="../../assets/下载.jpg" alt />
          <p>梦学谷会员管理系统</p>
        </div>
        <div>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              {{loginUser.username}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="endit">
                <i class="el-icon-edit"></i>修改密码
              </el-dropdown-item>
              <el-dropdown-item command="logout">
                <i class="el-icon-s-fold"></i> 退出系统
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <!-- <el-button type="success">返回登录页面</el-button> -->
      </el-header>
      <el-container>
        <el-aside>
          <el-menu
            default-active="/welcome"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            router
          >
            <el-menu-item index="/welcome">
              <i class="el-icon-s-home"></i> 首页
            </el-menu-item>
            <el-menu-item
              index="/member"
              @click="openFullScreen1"
              v-loading.fullscreen.lock="fullscreenLoading"
            >
              <i class="el-icon-user-solid"></i> 会员管理
            </el-menu-item>
            <el-menu-item
              index="/supplier"
              @click="openFullScreen1"
              v-loading.fullscreen.lock="fullscreenLoading"
            >
              <i class="el-icon-s-cooperation"></i> 供应商管理
            </el-menu-item>
            <el-menu-item
              index="/shop"
              @click="openFullScreen1"
              v-loading.fullscreen.lock="fullscreenLoading"
            >
              <i class="el-icon-s-goods"></i> 商品管理
            </el-menu-item>
            <el-menu-item
              index="/staff"
              @click="openFullScreen1"
              v-loading.fullscreen.lock="fullscreenLoading"
            >
              <i class="el-icon-user"></i> 员工管理
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

    <!-- 修改密码的对话框 对应上面endit事件 -->
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="原密码" prop="oldPass">
          <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      loginUser: JSON.parse(sessionStorage.getItem("loginUsername")),
      dialogVisible: false, //修改密码弹出层
      ruleForm: {
        oldPass: "",
        pass: "",
        checkPass: ""
      },
      rules: {
        oldPass: [{ validator: validatePass, trigger: "blur" }],
        pass: [{ validator: validatePass1, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      },
      fullscreenLoading: false
    };
  },
  methods: {
    //退出,清除路由信息
    //element中Dropdown下拉菜单的触发事件
    handleCommand(command) {
      // 当command等于logout时执行退出登录事件
      if (command == "logout") {
        this.$confirm("亲,确认退出梦学谷后台管理系统吗?", "欢迎为您服务", {
          confirmButtonText: "确定退出",
          cancelButtonText: "我在想想",
          type: "warning"
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "退出成功!"
            });
            this.$router.push("/login");
            sessionStorage.clear("loginUsername");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消退出"
            });
          });
      }
      // 当command等于logout时执行修改密码事件
      if (command == "endit") {
        this.dialogVisible = true;
      }
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    submitForm(formName) {
      console.log(formName);
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$message.success("密码修改成功");
          this.dialogVisible = false;
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    openFullScreen1() {
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.fullscreenLoading = false;
      }, 1000);
    }
  },

  mounted() {}
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-container {
    width: 100%;
    height: 100%;
    .el-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #2d3a4b;
      width: 100%;
      height: 100px;
      div {
        display: flex;
        align-items: center;
        p { 
          margin-left: 20px;
          font-size: 24px;
          color: white;
          font-weight: 700;
        }
        img {
          height: 60px;
          width: 60px;
          border-radius: 50%;
        }
      }
    }
    .el-container {
      display: flex;
      flex: 1;
      justify-content: space-between;
      .el-aside {
        width: 200px !important;
        background-color: #333744;
      }
      .el-main {
        flex: 1;
        // background: #e4f5ef;
      }
    }
  }
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>